<template>
  <div class="mine">
    <div class="myheader">
      <div class="headerLeft">
        <p>欢迎你！<span>{{ nickname }}</span></p>
      </div>
      <div class="headerRight">
        <van-button type="default" size="small" to="/login" v-if="isShow">登录</van-button>
        <van-button type="default" size="small" to="/register" v-if="isShow">注册</van-button>
        <van-button type="default" @click="exit" size="small"  v-if="!isShow">退出登录</van-button>
      </div>
    </div>
    <div class="mymain">
      <div class="mylist">
        <router-link to="/ent" tag="div" class="tp">
          <van-icon name="orders-o" color="orange" />
          <span>购物订单</span>
        </router-link>
        <router-link to="/question" tag="div" class="tp">
          <van-icon name="chat-o" color="orange" />
          <span>服务中心</span>
        </router-link>
        <router-link to="/locations" tag="div" class="tp">
          <van-icon name="diamond-o" color="orange" />
          <span>收货地址</span>
        </router-link>
        <router-link to="/about" tag="div" class="tp">
          <van-icon name="warning-o" color="blue" />
          <span>关于我们</span>
        </router-link>
        <router-link to="/feedback" tag="div" class="tp">
          <van-icon name="comment-o" color="blue" />
          <span>意见反馈</span>
        </router-link>
        <router-link to="/collection" tag="div" class="tp">
          <van-icon name="ellipsis" color="blue" />
          <span>我的收藏</span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Button, Grid, GridItem, Icon } from 'vant'

Vue.use(Button)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Icon)

export default {
  name: 'Mine',
  data () {
    return {
      nickname: this.getname(),
      isShow: this.id === '' ? true : this.isShow
    }
  },
  methods: {
    getname () {
      var nickname = '请登录'
      this.id = (document.cookie).replace(/[^0-9]/ig, '')
      if (sessionStorage.getItem('user')) {
        nickname = sessionStorage.getItem('user')
        if (this.id === sessionStorage.getItem('user')) {
          this.isShow = false
        }
      } else {
        this.isShow = true
      }
      return nickname
    },
    exit () {
      sessionStorage.clear()
      this.nickname = '请登录'
      this.isShow = true
      localStorage.removeItem('cart')
      localStorage.removeItem('collection')
      location.reload()
    }
  }
}
</script>

<style lang="scss">
.mine {
  height: 100%;
  background: url('https://img0.baidu.com/it/u=2591908592,557434822&fm=11&fmt=auto&gp=0.jpg') no-repeat;
  background-size: 100% 100%;
}
.myheader {
  height: 60px;
  padding: 10px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.headerLeft {
  width: 50%;
  p {
    text-align: center;
    font-size: 18px;
  }
}
.headerRight {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.mymain {
  padding: 50px 0;
  .van-icon::before {
    font-size: 24px;
  }
  span {
    color: #333;
    font-size: 12px;
    line-height: 2;
  }
}
.mylist {
  display: flex;
  flex-wrap: wrap;
  padding: 0 5%;
  justify-content: space-around;
  background-color: rgba($color: white, $alpha: 0.4);
}
.tp {
  width: 30%;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 10px 0;
}
</style>
